{% extends "base.html" %}

{% block title %}About - Flask Blueprints Demo{% endblock %}

{% block content %}
<h1>About Main Blueprint</h1>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5>Main Blueprint Purpose</h5>
            </div>
            <div class="card-body">
                <p>The Main blueprint handles core application pages that don't belong to specialized sections.</p>
                <p>This includes:</p>
                <ul>
                    <li>Home page</li>
                    <li>About page</li>
                    <li>Contact page</li>
                    <li>General error pages</li>
                </ul>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5>Blueprint Benefits</h5>
            </div>
            <div class="card-body">
                <p>Using blueprints provides several advantages:</p>
                <ul>
                    <li><strong>Modularity</strong> - Separate concerns into distinct components</li>
                    <li><strong>Reusability</strong> - Blueprints can be registered in multiple applications</li>
                    <li><strong>Organization</strong> - Keep related functionality together</li>
                    <li><strong>Maintainability</strong> - Easier to manage large applications</li>
                    <li><strong>Collaboration</strong> - Teams can work on different blueprints</li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5>Blueprint Information</h5>
            </div>
            <div class="card-body">
                <p><strong>Name:</strong> main</p>
                <p><strong>URL Prefix:</strong> /</p>
                <p><strong>Template Folder:</strong> templates/</p>
                <p><strong>Static Folder:</strong> static/</p>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5>Navigation</h5>
            </div>
            <div class="card-body">
                <a href="{{ url_for('main.index') }}" class="btn btn-primary w-100 mb-2">Home</a>
                <a href="{{ url_for('blog.index') }}" class="btn btn-secondary w-100 mb-2">Blog</a>
                <a href="{{ url_for('admin.dashboard') }}" class="btn btn-secondary w-100 mb-2">Admin</a>
                <a href="{{ url_for('api.users') }}" class="btn btn-secondary w-100">API</a>
            </div>
        </div>
    </div>
</div>

<div class="mt-3">
    <a href="{{ url_for('main.index') }}" class="btn btn-secondary">Back to Home</a>
</div>
{% endblock %}